iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0
Modern Web

Nuxt 3 - 因為還不穩定,所以來踩地雷系列 第 6

[Day 6] 認識 Nuxt3 專案結構 - 其他目錄介紹

  • 分享至 

  • xImage
  •  

開始今天的文章前,先提醒一下 Nuxt3 又更新了,來到了v3.0.0-rc.11

前幾天已經介紹了 Nuxt3 中幾個重要的目錄結構,今天會簡單介紹完其他的目錄結構,明天就會針對 config 設定來說明。

內容管理 - content

content 資料夾對應了另一個套件 Content,這個資料夾內可以存放 Markdown、csv、yml 等類型的檔案,能把這些資料檔案轉換成 html 的形式來呈現,因為目前工作上沒有這個需求,暫時沒有深入研究,除了官方文件外也可以到他的 playground試試看。

插件 - plugins

通常 plugin 都是使用別人寫好的,除非要自幹一個,不然通常不太會特地撰寫,算是比較進階的應用。

因為 Nuxt3 執行時是跑一個 server 服務,所以 plugin 也分成 server 端使用或是 client 端使用(只要在檔名加上後綴 .server 或 .client 即可)。

官方文件中有介紹導入 Google Analytics tags 的方法,要注意的是 plugins 資料夾內的檔案或是第一層目錄中的 index 檔案都會自動載入,如果寫在 plugins 中就不需要在 nuxt.config 引入(Nuxt3 文件中的作法和 Google Analytics Module for Nuxt 文件不同)。

伺服器端 - server

在 server 資料夾內又區分三個子目錄:

  • api
  • routes
  • middleware

因為 Nuxt3 本身是運行在伺服器上的,所以在這個資料夾內可以做一些「後端」的事情,但是實際專案通常都是前後端分離,目前小弟見識還不廣的情況下不會操作到這個部分。

與 Vue3 相同的資料夾

  • assets
  • components
  • composables
  • public

以上這些沒介紹到的目錄結構都是在 Vue3 就存在的,如果感到陌生,可以先回過頭讀 Vue3 的文件,在開發時也會比較順手。


上一篇
[Day 5] 認識 Nuxt3 專案結構 - middleware
下一篇
[Day 7] 認識 Nuxt3 環境配置 - SEO
系列文
Nuxt 3 - 因為還不穩定,所以來踩地雷30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言